import React,{Component} from 'react';
import setc from './setc.module.css'
import { Select,Button,Table,Input, Space } from 'antd';
const { Option } = Select;
class SetCourse extends Component{
    state={
        columns:[
            {
              title: '编号',
              dataIndex: 'jndex',
              key:'jndex',
              render:(value)=>value+1,
            },
            {
              title: '课程名称',
              dataIndex: 'course',
              key: 'course'
            },
            {
              title: '所属阶段',
              dataIndex: 'moment',
              key: 'moment'
            },
            {
                title: '所属学院',
                dataIndex:'txt',
                key: 'txt'
              },
          ],
          selelist:'',
          schoolid:'网站工程',
          courseList:'',
          data:''
    }
    //选择框的变化
    handleChange=value=>{
      this.setState({schoolid:value})
      this.createCourselist(this.state.data,value)
      
    }
    //重新定义courselist
    createCourselist=(data,value)=>{
      data.forEach(item=>{
        if(item.schoolid===value){
          let courseList=[]
            item.courseList.forEach((jtem,jndex)=>{
              let obj={
                  txt:item.schoolid,
                  course:jtem.txt,
                  moment:jtem.moment,
                  jndex
              }
              courseList.push(obj)
          })
          this.setState({courseList})
          return
        }
      })
    }
    render(){
        const {columns,selelist,courseList,schoolid}=this.state
        return <div className={setc.box}>
                <div style={{padding:'15px 0px 20px'}}>
                  专业课程： <Select value={schoolid} style={{ width: 120,marginRight:'40px'  }} onChange={this.handleChange}>
                                {
                                  selelist&&selelist.map((item,index)=>{
                                  return  <Option value={item} key={index+'sc'}>{item}</Option>
                                  })
                                }
                             </Select>
               </div>
               <Table columns={columns} dataSource={courseList} pagination={{
                       pageSize:6
               }}/>
        </div>
    }
    componentDidMount(){
       this.$httpReq(this.$api.getSchoolList(),res=>{
         const {code,data}=res
         if(code){
           this.setState({data})
           let selelist=[];
           data.forEach(item=>{
              selelist.push(item.schoolid)
           })
           this.setState({selelist})
           this.createCourselist(data,this.state.schoolid)
         }
       })
    }
}
export default SetCourse
